<script setup>
import {computed, reactive, ref} from 'vue';
import {useRouter} from "vue-router";
import {addCourses} from "@/api/post.js";

const chapterName = ref('');
const showSuccess = ref(false);

const router = useRouter();

const post = reactive(
  {
    title: ''
  }
)

let isFormInvalid = computed(() => {
  return post.title === '';
});

function sb() {
  addCourses(post)
    .then(() => {
      // 跳转到首页
      router.push({name: 'back-course'})
    })
}

const addChapter = () => {
  if (!post.title.value.trim()) {
    alert('课程名称不能为空');
    return;
  }

  // 显示成功提示
  showSuccess.value = true;

  // 2秒后隐藏提示
  setTimeout(() => {
    showSuccess.value = false;
  }, 2000);

  // 清空输入框
  chapterName.value = '';
};
</script>

<template>
  <form @submit.prevent="sb">
    <div class="chapter-container">
      <div class="header">
        <h2 class="title">添加新课程</h2>
        <div class="title-line"></div>
      </div>

      <div class="form-group">
        <label class="label">
          <span class="icon">📚</span>
          课程名称
        </label>
        <input
          id="title"
          name="title"
          type="text"
          v-model="post.title"
          class="input"
          placeholder="请输入课程名称"
          required
        >
      </div>

      <button
        class="add-button"
        @click="addChapter"
        :disabled="isFormInvalid"
        :class="{ 'disabled': isFormInvalid }"
      >
        添加课程
      </button>

      <!-- 成功提示 -->
      <transition name="fade">
        <div v-if="showSuccess" class="success-message">
          <span class="success-icon">✅</span>
          课程添加成功！
        </div>
      </transition>
    </div>
  </form>
</template>


<style scoped>
.chapter-container {
  max-width: 680px;
  margin: 40px auto;
  padding: 40px;
  background: #66b1ff;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  transition: transform 0.2s ease;
}

.chapter-container:hover {
  transform: translateY(-2px);
}

.header {
  margin-bottom: 32px;
  text-align: center;
}

.title {
  color: #2c3e50;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 12px;
}

.title-line {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #6a85b6 0%, #bac8e0 100%);
  margin: 0 auto;
  border-radius: 2px;
}

.form-group {
  margin-bottom: 20px;
}

.label {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: #5a6d82;
  font-size: 16px;
  font-weight: 500;
}

.input {
  width: 100%;
  padding: 14px 20px;
  border: 2px solid #e0e6ed;
  border-radius: 8px;
  font-size: 15px;
  transition: all 0.3s ease;
  background: #f8fafc;
}

.input:focus {
  border-color: #6a85b6;
  box-shadow: 0 4px 12px rgba(106, 133, 182, 0.15);
  background: #ffffff;
}

.input::placeholder {
  color: #c0c7d0;
}

.add-button {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #6a85b6 0%, #879dd2 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.add-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(106, 133, 182, 0.25);
}

.add-button:active {
  transform: translateY(0);
}

.disabled {
  opacity: 0.7;
  cursor: not-allowed;
  background: linear-gradient(135deg, #d3d8e0 0%, #e8ebf0 100%);
}

.success-message {
  margin-top: 20px;
  padding: 16px;
  background: #edf7ed;
  color: #4caf50;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  animation: slideIn 0.3s ease;
}

.success-icon {
  font-size: 18px;
}

/*两个灰色的并非没有用到，需要再触发时才会显示，commit留有提示*/
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

@keyframes slideIn {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
</style>

